<template>
<div id="app">
  <!--左侧导航-start-->
  <div class="navbar-left">
    <ul>
      <li v-bind:class="{ active: isActive==index }" v-for="(list,index) in navbarList" v-on:click="listActive(index)" >
        <h3>{{ list.text }}</h3>
        <span>10</span>
      </li>
    </ul>
  </div>
  <!--左侧导航-end-->
  <!--右侧栏-start-->
  <div class="item-list">
    <div class="item-list-right">
      <div class="item-list-box" v-for="item in itemList" >
        <img src="static/images/demoimg.jpeg" width="100%" alt="商品图片" style="border-radius:6px">
        <h3>{{ item.text }}</h3>
        <div class="money-and-num">
          <div class="money">￥122</div> 
          <div class="num">
            <img src="../assets/min.png" width="22" height="22" name="min-goods" v-on:click="minGoods()">
            <input type="number" v-bind:value="Num" name="">
            <img src="../assets/add.png" width="22" height="22" name="add-goods" v-on:click="addGoods()">
          </div>
          <div class="clearfix"></div>
          <!--已售罄-start-->
          <div class="nogoods" style="display:none">已售罄</div>
          <!--已售罄-end-->
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
  <br><br><br>
  <!--右侧栏-end-->
  <!--底部菜单栏-start-->
  <div class="footbar">
    <div class="text">
      已选<span> 0 </span>道菜，共计<span>￥122</span>
    </div>
    <router-link to="/orderlist"><div class="btn">选好了</div></router-link>
  </div>
</div>
</template>

<script>
export default {
  name: 'Index',
  data: function () {
    return {
      isActive: false,
      navbarList: [
        { text: '现炒类' },
        { text: '甜品类' },
        { text: '炖品类' }
      ],
      itemList: [
        { text: '菜品名称' },
        { text: '菜品名称' },
        { text: '菜品名称' }
      ],
      Num: '0'
    }
  },
  methods: {
    listActive: function (index) {
      this.isActive = index
    },
    minGoods: function () {
      if (this.Num > 0) {
        --this.Num
      }
    },
    addGoods: function () {
      ++this.Num
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .navbar-left{
    width: 30%;
    width:30vw;
    height: 100%;
    height:100vh;
    background: #f6f6f6;
    text-align: center;
    position: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
  }
  ::-webkit-scrollbar{
    display: none;
  }
  .navbar-left ul li{
    position: relative;
    padding:1.2rem 0;
  }
  .navbar-left ul li.active{
    background: #fff;
  }
  .navbar-left ul li span{
    position:absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: red;
    color:#fff;
    font-size:0.6rem;
    text-align: center;
    border-radius:100%;
    min-width: 18px;
    min-height: 18px;
    line-height: 18px;
  }
  .item-list{
    width: 100%;
    position: relative;
    background: #fff;
  }
  .item-list-right{
    width: 70%;
    width: 70vw;
    float: right;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .clearfix{
    clear: both;
  }
  .item-list-box{
    padding:0.75rem;
  }
  .money-and-num{
    position: relative;
  }
  .money-and-num .money{
    width: 50%;
    float: left;
    font-size:1rem;
    color:#F4791F;
  }
  .money-and-num .num{
    width: 50%;
    float: right;
    text-align: right;
  }
  .money-and-num .num input{
    width:30%;
    border:none;
    text-align: center;
    font-size:0.9rem;
  }
  .money-and-num .num img{
    display: inline-block;
    border-radius:100%;
    vertical-align: middle;
  }
  .item-list-box h3{
    margin:0.5rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .footbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 999;
  }
  .footbar .text{
    width:70%;
    width: 70vw;
    background: #333;
    color:#fff;
    font-size:0.9rem;
    text-align: center;
    height: 50px;
    line-height: 50px;
    float: left;
  }
  .footbar .text input{
    border: none;
    min-width: 8%;
    width:8%;
    background: none;
    color:#fff;
    text-align: center;
  }
  .footbar .btn{
    width:30%;
    width:30vw;
    background: #62b900;
    color:#fff;
    font-size:0.9rem;
    text-align: center;
    height: 50px;
    line-height: 50px;
    float: right;
  }
  .nogoods{
    width: 90px;
    height: 30px;
    line-height: 30px;
    background: #ddd;
    color: #fff;
    text-align: center;
    float: right;
    border-radius: 6px;
    font-size: 0.9rem;
  }
</style>
